<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { useTabs } from '@vben/hooks';

import { Button } from 'ant-design-vue';

import { getDetailByRoomId, getRoomTypeInfo } from '#/api';
import { BASE_ICON_URL } from '#/config';
import { router } from '#/router';

const { closeTabByKey } = useTabs();

// 初始化时拿到路由携带过来的id参数
const roomId = ref<null | number | string | undefined>();

const handleClose = async () => {
  // 返回到房型列表页面
  closeTabByKey(`/info/room-info/room-info-details?id=${roomId.value}`);
  router.push('/info/room-info/room-info-list');
};

// 去编辑房型信息
const roomEdit = () => {
  router
    .push({
      path: '/info/room-info/room-info-edit',
      query: { id: roomId.value },
    })
    .catch((error) => {
      console.error('页面跳转失败:', error);
    });
};

// 去编辑房型设施
const facilityEdit = () => {
  router.push({
    path: '/info/room-facility',
  });
};

// 跳转到房型图片编辑页面
const imagesEdit = () => {
  router.push({
    path: '/info/album-info',
    query: { roomType: 'baseRoom' },
  });
};

// 房型信息
const roomInfo = ref<any>({});

// 吸烟状态
const smokingAllowed = computed(() => {
  switch (roomInfo.value.smokingAllowed) {
    case 0: {
      return '全部客房禁烟';
    }
    case 1: {
      return '全部客房可吸烟';
    }
    case 2: {
      return '部分客房可吸烟';
    }
  }
  return '';
});

// 获取房型信息
const getDetail = async () => {
  try {
    const { data } = await getRoomTypeInfo({
      id: roomId.value,
    });
    roomInfo.value = data;
  } catch (error) {
    console.error('获取房型信息错误：', error);
  }
};

const facility = ref<any>({
  isPowerSocket: true,
  isPower220v: true,
  isClothesRack: true,
  isToothbrush: true,
  isShampoo: true,
  isShowerCap: true,
  isComb: true,
  isShowerGel: true,
  isToothpaste: true,
  isSatelliteTv: true,
  isTv: true,
  isKettle: true,
  isBottledWater: true,
  isTeaBag: false,
  isAirCondition: true,
  isCurtain: true,
  isQuilt: true,
  isBlanket: true,
  isSlippers: true,
  isHotWater24h: true,
  isPrivateBathroom: true,
  isHairDryer: true,
  isTowel: true,
  isBathTowel: true,
  isDesk: true,
  isWardrobe: true,
  isSofa: true,
  isDiningTable: true,
  isWallDecoration: true,
  isWifi: false,
  isTelephone: true,
  isBathroom: true,
  isBathRobe: true,
  isMahjongRoom: false,
});
// 获取房型设施
const getFacility = async () => {
  try {
    const { data } = await getDetailByRoomId({
      id: roomId.value,
    });
    facility.value = data;
  } catch (error) {
    console.error('获取房型设施错误：', error);
  }
};

onMounted(() => {
  // 初始化的时候获取路由携带过来的id参数
  const { id: queryId } = router.currentRoute.value.query;
  roomId.value = Array.isArray(queryId) ? queryId[0] : queryId;
  getDetail();
  getFacility();
});
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div id="main" class="main overflow-auto p-4">
      <div class="mb-4 text-2xl font-bold">信息详情</div>
      <!-- 基本信息 -->
      <div class="card-box rounded-md">
        <div
          class="flex flex-wrap items-center justify-between border-b px-4 py-2"
        >
          <p class="flex-1 text-xl font-bold">基本信息</p>
          <Button
            class="h-auto w-auto border-gray-400 px-6 py-2"
            @click="roomEdit"
          >
            编辑
          </Button>
        </div>
        <div class="px-4 py-2">
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">房型名称</div>
            <div class="min-w-[200px] flex-1 py-1">{{ roomInfo.nameZh }}</div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">售卖方式</div>
            <div class="min-w-[200px] flex-1 py-1">
              完整空间售卖-对整个空间录入
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">床型</div>
            <div class="min-w-[200px] flex-1 py-1">
              <template v-for="(item, index) in roomInfo.bedTypeList">
                <p
                  v-if="item.bedType && item.bedNum > 0 && item.bedWidth"
                  :key="index"
                >
                  {{ item.bedType || '' }} {{ item.bedNum || 1 }}张， 宽
                  {{ item.bedWidth || '-' }}m
                </p>
              </template>
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">
              酒店中此类房型的总数
            </div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.roomNum || 0 }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">窗户</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.windowDesc || '' }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">
              最多入住人数（不含加床）
            </div>
            <div class="min-w-[200px] flex-1 py-1">
              <span>最多入住{{ roomInfo.maxAdult || 0 }}位成人，</span>
              <span>{{
                roomInfo.maxChild === -1
                  ? '未知数量'
                  : roomInfo.maxChild === 0
                    ? '不接待'
                    : `最多入住${roomInfo.maxChild}`
              }}</span>
              <span>儿童， 最多入住总人数{{ roomInfo.maxGuests || 0 }}人</span>
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">使用面积</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.roomArea || 0 }}m²
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">楼层</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.floor || '-' }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">吸烟信息</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ smokingAllowed || '-' }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">状态</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.enableStatus ? '显示' : '影藏' }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">是否为推荐房型</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.isHot ? '是' : '否' }}
            </div>
          </div>
          <div class="mb-2 flex flex-wrap">
            <div class="w-[250px] max-w-[100%] py-1 pr-2">房型描述</div>
            <div class="min-w-[200px] flex-1 py-1">
              {{ roomInfo.roomDesc || '-' }}
            </div>
          </div>
        </div>
      </div>
      <!-- 房型设施 -->
      <div class="card-box mt-3 rounded-md">
        <div
          class="flex flex-wrap items-center justify-between border-b px-4 py-2"
        >
          <p class="flex-1 text-xl font-bold">房型设施</p>
          <Button
            class="h-auto w-auto border-gray-400 px-6 py-2"
            @click="facilityEdit"
          >
            编辑
          </Button>
        </div>
        <div class="pb-3 pt-4">
          <div class="waterfall-container">
            <div
              v-if="
                facility.isPowerSocket ||
                facility.isPower220v ||
                facility.isClothesRack ||
                facility.isMahjongRoom
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-18.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">便利设施</h3>
                  <p v-if="facility.isPowerSocket">单一规格电源插座</p>
                  <p v-if="facility.isPower220v">220V电压插座</p>
                  <p v-if="facility.isClothesRack">衣架</p>
                  <p v-if="facility.isMahjongRoom">棋牌桌</p>
                </div>
              </div>
            </div>
            <div v-if="facility.isTv" class="waterfall-item mb-5 pl-4">
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-17.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">媒体科技</h3>
                  <p v-if="facility.isTv">电视机</p>
                </div>
              </div>
            </div>
            <div
              v-if="
                facility.isToothbrush ||
                facility.isShampoo ||
                facility.isShowerCap ||
                facility.isComb ||
                facility.isShowerGel ||
                facility.isToothpaste
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-09.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">洗浴用品</h3>
                  <p v-if="facility.isToothbrush">牙刷</p>
                  <p v-if="facility.isShampoo">洗发水</p>
                  <p v-if="facility.isShowerCap">浴帽</p>
                  <p v-if="facility.isComb">梳子</p>
                  <p v-if="facility.isShowerGel">沐浴露</p>
                  <p v-if="facility.isToothpaste">牙膏</p>
                </div>
              </div>
            </div>
            <div
              v-if="
                facility.isAirCondition ||
                facility.isCurtain ||
                facility.isQuilt ||
                facility.isBlanket
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-16.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">客房设施</h3>
                  <p v-if="facility.isAirCondition">空调</p>
                  <p v-if="facility.isCurtain">自动窗帘</p>
                  <p v-if="facility.isQuilt">鸭绒被</p>
                  <p v-if="facility.isBlanket">毯子或被子</p>
                </div>
              </div>
            </div>
            <div
              v-if="
                facility.isKettle ||
                facility.isBottledWater ||
                facility.isTeaBag
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-14.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">食品饮品</h3>
                  <p v-if="facility.isKettle">电热水壶</p>
                  <p v-if="facility.isBottledWater">瓶装水</p>
                  <p v-if="facility.isTeaBag">茶包</p>
                </div>
              </div>
            </div>
            <div
              v-if="
                facility.isSlippers ||
                facility.isHotWater24h ||
                facility.isPrivateBathroom ||
                facility.isHairDryer ||
                facility.isBathroom ||
                facility.isTowel ||
                facility.isBathTowel
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-15.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">卫浴设施</h3>
                  <p v-if="facility.isSlippers">拖鞋</p>
                  <p v-if="facility.isHotWater24h">24小时热水</p>
                  <p v-if="facility.isPrivateBathroom">私人浴室</p>
                  <p v-if="facility.isHairDryer">吹风机</p>
                  <p v-if="facility.isBathroom">私人卫生间</p>
                  <p v-if="facility.isTowel">毛巾</p>
                  <p v-if="facility.isBathTowel">浴巾</p>
                </div>
              </div>
            </div>
            <div
              v-if="
                facility.isDesk ||
                facility.isWardrobe ||
                facility.isSofa ||
                facility.isDiningTable ||
                facility.isWallDecoration
              "
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-11.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">客房布局和家具</h3>
                  <p v-if="facility.isDesk">书桌</p>
                  <p v-if="facility.isWardrobe">衣柜/衣橱</p>
                  <p v-if="facility.isSofa">沙发</p>
                  <p v-if="facility.isDiningTable">餐桌</p>
                  <p v-if="facility.isWallDecoration">挂墙装饰画/字画</p>
                </div>
              </div>
            </div>
            <div
              v-if="facility.isTelephone || facility.isWifi"
              class="waterfall-item mb-5 w-[50%] pl-4"
            >
              <div class="flex flex-wrap">
                <img
                  :src="`${BASE_ICON_URL}icons-13.png`"
                  class="mr-2 mt-1 h-[16px] w-[16px]"
                />
                <div>
                  <h3 class="mb-2 text-base font-bold">网络与通讯</h3>
                  <p v-if="facility.isTelephone">电话</p>
                  <p v-if="facility.isWifi">客房WIFI</p>
                </div>
              </div>
            </div>
          </div>
          <div class="clear-both w-full"></div>
        </div>
      </div>
      <!-- 房型图片 -->
      <div class="card-box mt-3 rounded-md">
        <div
          class="flex flex-wrap items-center justify-between border-b px-4 py-2"
        >
          <p class="flex-1 text-xl font-bold">房型图片</p>
          <Button
            class="h-auto w-auto border-gray-400 px-6 py-2"
            @click="imagesEdit"
          >
            编辑
          </Button>
        </div>
        <div class="flex flex-wrap px-4 pb-4 pl-1 pt-2">
          <div
            v-for="item in roomInfo.imageList"
            :key="item"
            :style="{ 'background-image': `url(${item})` }"
            class="my-1 ml-3 h-[170px] w-[170px] overflow-hidden rounded-md bg-cover bg-center bg-no-repeat"
          ></div>
        </div>
      </div>
    </div>
    <div class="card-box bottom-div flex rounded-none border-l-0 px-5 py-3">
      <Button
        class="h-auto w-auto rounded-md border-gray-400 px-6 py-2"
        @click="handleClose"
      >
        返回
      </Button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  flex: 1;
}

.waterfall-container {
  column-count: 2; /* 列数 */
}

.waterfall-item {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  break-inside: avoid; /* 防止元素跨列 */
}
</style>
